<template>
  <div class="goods_item" @click="goDetail(id)">
    <div class="img">
      <img v-lazy="image" alt="" />
    </div>
    <div class="info">
      <div class="des">
        {{ store_name }}
      </div>
      <p class="price">
        ￥<span>{{ price }}</span>
      </p>
      <div class="inf">
        <div class="vip">{{ vip_price }} <i></i></div>
        <div class="sales">已售{{ sales }}件</div>
      </div>
      <div class="add_cart">
        <img src="../../assets/icon/common/red_cart.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
    },
    cate_id: {
      type: String,
    },
    image: {
      type: String,
    },
    price: {
      type: String,
    },
    sales: {
      type: String,
    },
    store_name: {
      type: String,
    },
    vip_price: {
      type: String,
    },
  },
  methods: {
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods_item {
  display: flex;
  // height: 90px;
  justify-content: space-between;
  .img {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    > img {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    position: relative;
    width: 260px;
    // flex-grow: 1;
    // flex: 1;
    height: 100%;
    border-bottom: 1px solid #f5f5f5;
    padding-right: 20px;
    padding-bottom: 15px;
    .des {
      font-size: 15px;
      color: #222;

      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      width: 100%;
    }
    .price {
      margin-top: 25px;
      font-size: 13px;
      color: #fc4141;
      font-weight: 700;
      span {
        font-size: 17px;
      }
    }
    .inf {
      display: flex;
      font-size: 12px;
      align-items: center;
      margin-top: 5px;
      .sales {
        margin-left: 20px;
        color: #aaaaaa;
      }
      .vip {
        color: #282828;
        font-weight: 700;
        i {
          display: inline-block;
          width: 23px;
          height: 11px;
          background: url(../../assets/icon/common/goods_vip.png) no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .add_cart {
      position: absolute;
      bottom: 15px;
      right: 10px;
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #fc4141;
      > img {
        width: 18px;
        height: 18px;
      }
    }
  }
}
</style>

